<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <title>东风日产</title>
    <link rel="import" href="../common/head.html?__inline">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="/node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="/node_modules/swiper/dist/css/swiper.css">
    <link rel="stylesheet" href="index.less">
    <script src="/web/lib/flexible.js"></script>
</head>
<body>


<audio id="music" src="video/bgm.mp3" preload loop></audio>
<div class="icon-music ani-music"></div>

<div class="head-icon"></div>

<div class="swiper-container main-swiper">
    <div class="swiper-wrapper">
        <!--<div class="swiper-slide slide0">
            <div class="main-box">
                <div class="tit4">11月1日开始</div>
                <div class="tit5">扫码赢取广州车展门票</div>
                <div class="tit6">活动即将开始，敬请期待</div>
            </div>
        </div>-->
        <div class="swiper-slide slide1">
            <link rel="import" href="../common/arrow-down.html?__inline">
            <div class="main-box">
                <div class="tit1 ani" swiper-animate-effect="fadeInDown">你是否想象过， <br>当有一天</div>
                <div class="tit2 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">方向盘会<b>思考</b></div>
                <div class="pic pic1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s"><img src="img/p1-img1.png"></div>
                <div class="pic pic2 disVisible"><img src="img/p1-img2.png"></div>
                <div class="pic pic3 disVisible"><img src="img/p1-img3.png"></div>
            </div>
            <canvas id="Mycanvas1" class="my-canvas"></canvas>
            <canvas id="c"></canvas>
        </div>

        <div class="swiper-slide slide2">
            <link rel="import" href="../common/arrow-down.html?__inline">
            <div class="main-box">
                <div class="tit2 ani" swiper-animate-effect="fadeInDown">发动机会<b>心跳</b></div>
                <div class="pic pic1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s"><img src="img/p2-img1.png"></div>
                <div class="pic pic2 disVisible"><img src="img/p2-img2.png"></div>
                <div class="pic pic3 disVisible"><img src="img/p2-img3.png"></div>
            </div>
        </div>

        <div class="swiper-slide slide3">
            <link rel="import" href="../common/arrow-down.html?__inline">
            <div class="main-box">
                <div class="tit2 ani" swiper-animate-effect="fadeInDown">中控屏会<b>沟通</b></div>
                <div class="pic pic1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s"><img src="img/p3-img1.png"></div>
                <div class="pic pic2 disVisible"><img src="img/p3-img2.png"></div>
                <div class="pic pic3 disVisible"><img src="img/p3-img3.png"></div>
            </div>
        </div>

        <div class="swiper-slide slide4">
            <link rel="import" href="../common/arrow-down.html?__inline">
            <div class="tit ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="0.3s">当汽车成为<br>你的<b>智行伙伴</b></div>
            <div class="car ani swiper-to" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s" swiper-animate-duration="3s">
                <img src="img/p4-car.png">
            </div>
        </div>

        <div class="swiper-slide slide5">
            <div class="txts">
                <div class="txt1 ani" swiper-animate-effect="fadeInDown">11月16日，邀您莅临广州国际车展</div>
                <div class="txt2 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.3s">4.2展馆东风日产展台一起见证</div>
                <div class="txt3 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.6s">第七代天籁 天纵而来</div>
            </div>
            <div class="car ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.9s" swiper-animate-duration="1s">
                <img src="img/p6-car.png">
            </div>
            <div class="btn"><a class="ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="2s">点击赢取广州车展门票</a></div>
        </div>

        <!--<div class="swiper-slide slide6">
            <div class="tit">
                <div class="ani" swiper-animate-effect="fadeInUp">第七代天籁</div>
                <div class="ani" swiper-animate-effect="fadeInUp" swiper-animate-delay="0.3s">天纵而来</div>
            </div>
            <div class="car ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.6s" swiper-animate-duration="3s">
                <img src="img/p6-car.png">
            </div>
        </div>-->

        <div class="swiper-slide slide7" ng-controller="forms">
            <div class="tit ani" swiper-animate-effect="fadeInUp">留下您的联系方式<br>即可有机会赢取广州车展门票</div>
            <form class="form ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.5s">
                <div class="group">
                    <input type="text" maxlength="16" placeholder="姓名" ng-model="infos.name">
                </div>
                <div class="group">
                    <input type="tel" maxlength="11" placeholder="手机号码" ng-model="infos.mobile">
                </div>
                <div class="group">
                    <input type="text" maxlength="50" placeholder="快递地址" ng-model="infos.address">
                </div>
            </form>
            <div class="btn"><a class="ani" swiper-animate-effect="zoomIn" swiper-animate-delay="1s" ng-click="submitForm()">提交</a></div>
        </div>

        <div class="swiper-slide slide8">
            <div class="tit">
                <div class="ani" swiper-animate-effect="fadeInDown">您的资料已成功提交！</div>
                <div class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.2s">关注“东风日产”官方微信或微博</div>
                <div class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.4s">中奖名单将会在11月12日公布</div>
                <div class="ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.6s">扫码了解更多日产智行科技</div>
            </div>
            <div class="qrcode ani" swiper-animate-effect="zoomIn" swiper-animate-delay="0.8s">
                <img src="img/p8-qrcode.png">
            </div>
            <div class="btn"><a class="ani share-open" swiper-animate-effect="zoomIn" swiper-animate-delay="1s">邀请好友一起赢取广州车展门票</a></div>
        </div>
    </div>
</div>

<div class="share-box">
    <img src="img/share-prompt.png">
</div>

</body>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/swiper/dist/js/swiper.js"></script>
<script src="/node_modules/gsap/src/uncompressed/TweenMax.js"></script>
<script src="/web/lib/jquery/swiper.animate1.0.2.min.js"></script>
<script src="/web/lib/jquery/jquery.touchSwipe.min.js"></script>
<script src="/web/lib/layer/layer.js"></script>
<script src="/web/js/config.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
    #ifdef GL_ES
        precision highp float;
    #endif
    void main(void) {
        gl_FragColor = vec4(0.2, 0.3, 0.4, 1.0);
    }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 vertexPosition;
  	uniform mat4 modelViewMatrix;
  	uniform mat4 perspectiveMatrix;
   	void main(void) {
  		gl_Position = perspectiveMatrix * modelViewMatrix * vec4(  vertexPosition, 1.0);
  	}
</script>
<script src="canvas.js"></script>
<script src="index.js"></script>
</html>